<template>
  <view>
    <view class="lock-tips" v-if="mtype == 'notlogin'">
      <view class="lock-text">更多资料记录需完善资料后查看</view>
      <custom-btn class="lock-btn" @click="toRegister">去完善</custom-btn>
    </view>

    <view class="lock-tips" v-if="mtype == 'region'">
      <view class="lock-text">更多资料记录需完善择偶地区要求</view>
      <custom-btn class="lock-btn" @click="toRegion">去完善</custom-btn>
    </view>

    <view class="lock-tips" v-if="mtype == 'member'">
      <view class="lock-text">更多资料记录需开通至尊会员后查看</view>
      <custom-btn class="lock-btn" @click="toMember">去开通</custom-btn>
    </view>

    <view class="com-tips" v-if="mtype == 'my'">
      <custom-btn class="com-btn" @click="toComplete">去完善孩子资料</custom-btn>
      <text class="con-text">很多家长想了解一下您家孩子的更多详细信息</text>
    </view>
  </view>
</template>
 
<script setup>
const props = defineProps({
  mtype: {
    type: String,
    default: "",
  },
});

const emits = defineEmits(["click"]);

const toRegister = () => {
  uni.navigateTo({ url: "/subPages/register/index" });
};

const toComplete = () => {
  uni.navigateTo({ url: "/subPages/complete/index" });
};

const toMember = () => {
  uni.navigateTo({ url: "/subPages/purchase/index" });
};

const toRegion = () => {
  emits("click");
};
</script>
 
<style lang='scss' scoped>
.lock-tips {
  padding: 60rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 28rpx;
  color: $uni-text-color;
  font-weight: 500;
}
.lock-btn {
  width: 400rpx;
  height: 100rpx;
  background: linear-gradient(180deg, #ffffff 0%, #ffefee 100%);
  border-radius: 120rpx;
  border: 1rpx solid #ff5c55;
  margin-top: 40rpx;
  color: #ff5c55;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 100rpx;
}

.com-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40rpx;
  .com-btn {
    width: 480rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: linear-gradient(180deg, rgba(241, 55, 64, 0.9) 0%, #f13740 100%);
    border-radius: 120rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #fff;
    margin-bottom: 20rpx;
  }
  .con-text {
    font-weight: 400;
    font-size: 28rpx;
    color: #999;
  }
}
</style>